<template>
	<view class="classification">
		<!-- 头部导航栏 -->
		<view class="home_nav" :style="{height:(statusBarHeight+45)+'px'}">
			<view class="home_nav_search" @click="Search" :style="{marginTop:(statusBarHeight+35)/2+'px'}">
				<image src="../../../static/image/images/search.png"></image>
				<view class="search">搜索</view>

			</view>
		</view>
		<!-- 中间内容部分 -->
		<view class="classification_content" :style="{marginTop:(statusBarHeight+44)+'px'}">
			<!-- 左边导航 -->
			<view class="classification_content_left">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" :style="{height:(windowHeight-(statusBarHeight+44)+'px')}">
					<view class="nav" v-for="(item,index) in common.modulesData.categoryModules" :key="index"
						:class="{'is_Show':isShow==index}" @click="getNav(item,index)">
						<image v-if="isborder==index" src="../../../static/image/class/juxing.png"></image>
						<text>{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
			<!-- 右边数据 -->
			<view class="classification_content_right">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" :style="{height:(windowHeight-(statusBarHeight+44)+'px')}">
					<view class="tab-item">
						<view v-for="(childlist, childkey) in childlist" :key="childlist.id" class="item"
							@click="getClassDetails(childlist)">

							<image :src="$wanlshop.oss(childlist.image)" mode="aspectFill"></image>
							<view class="text">{{childlist.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				// 点击对应的导航显示海边对应的颜色
				isShow: 0,
				isborder: 0,
				// 导航栏高度
				statusBarHeight: 0,
				// 分类标题
				categoryModules: [],
				// 分类标题数据
				childlist: [],
				windowHeight:0,//屏幕的高度

			};
		},
		computed: {
			...mapState(['common', 'statistics', 'cart'])
		},

		methods: {
			Search() {
				// uni.navigateTo({
				// 	url:'../classDetails/classDetails'
				// })	
				uni.navigateTo({
					url: '../../homes/home_search/home_search'
				})
				var obj = {
					id: '',
					image: '',
					name: '',
					pid: '',
				}
				this.$store.commit('common/cateSearch', obj);
			},

			// 点击导航改变对应的值
			getNav(item, index) {
				console.log('dada', index)
				this.isShow = index;
				this.isborder = index;
				this.childlist = item.childlist
				console.log('item', item)
			},
			// 点击对应商品跳转到商品详情
			getClassDetails(item) {
				// console.log('item',item)
				uni.navigateTo({
					url: '../classDetails/classDetails?childlist=' + encodeURIComponent(JSON.stringify(item))
				})

			},
			// 计算系统屏幕的高度
			GetStatusBarHeight() {
				let that = this;
				uni.getSystemInfo({
					// 获取系统屏幕的高度
					success: function(res) {
						that.statusBarHeight = res.statusBarHeight;
						that.windowHeight=res.windowHeight
						console.log('状态栏高度', res)
					},
				});
			},
		},
		onLoad() {
			//调用系统屏幕尺寸函数
			this.GetStatusBarHeight();
			// 获取导航分类数据
			var categoryModules = this.$store.state.common.modulesData.categoryModules;
			this.childlist = categoryModules[0].childlist
			console.log('导航分类', this.$store.state.common.modulesData.categoryModules)

		}

	}
</script>

<style lang="scss">
	.classification {
		
		.home_nav {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			width: 100%;
			// height: 150rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			z-index: 9999;

			&_search {
				position: relative;
				margin-left: 15rpx;
				background: #eeeeee;
				width: 400rpx;
				height: 60rpx;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;


				image {
					width: 27rpx;
					height: 27rpx;
					// position: absolute;
					// left: 100rpx;
					// top: 10rpx;
				}

				.search {
					font-size: 26rpx;
					color: #ababab;
					margin-left: 10rpx;
				}


			}
		}

		&_content {
			// background-color:red;
			display: flex;
			height: 100%;
			width: 100%;

			&_left {
				// background-color: red;
				width: 180rpx;
				border-right: 1rpx solid #F5F5F5;

				.scroll-Y {
					// background-color: pink;
					background-color: #FFFFFF;
					// height: 1120rpx;

					.nav {
						background-color: #ffffff;
						height: 100rpx;
						line-height: 100rpx;
						// border-bottom: 1px solid #808080;
						font-size: 26rpx;
						display: flex;
						align-items: center;
						color: #888888;

						// text-align: center;
						text {
							// background-color: blue;
							width: 172rpx;
							text-align: center;
							// background-color: pink;
						}

						image {
							width: 8rpx;
							height: 80rpx;
						}
					}

					.is_Show {
						color: #000000;

					}
				}
			}

			&_right {
				background-color: #FFFFFF;
				width: 570rpx;

				.scroll-Y {
					// height: 1120rpx;
					background-color: #FFFFFF;

					.tab-item {
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

						.item {
							background-color: #FFFFFF;
							width: 285rpx;
							text-align: center;
							margin-bottom: 20rpx;
							height: 250rpx;
							padding-top: 10rpx;

							image {
								width: 200rpx;
								height: 150rpx;
							}

							.text {
								font-size: 26rpx;
								color: #000000;
								margin-top: 10rpx;
								// background-color: pink;
							}

						}
					}

				}
			}
		}
	}
</style>
